<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>React1</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">

        //1.按条件渲染dom
        // function formatName(user) {
        //     return user.firstName + ' ' + user.lastName;
        // }
            
        // function getGreeting(user) {
        // if (user) {
        //     return <h1>Hello, {formatName(user)}!</h1>;
        // }
        //     return <h1>Hello, Stranger.</h1>;
        // }
        // const user = {
        //     firstName: 'Harper',
        //     lastName: 'Perez'
        // };
        // const element = (
        //     <h1>
        //         Hello, {formatName(user)}!
        //     </h1>
        // );
        // ReactDOM.render(
        //     getGreeting(),//html片段
        //     document.getElementById('root')//dom位置
        // );
        // console.log(ReactDOM)



        //2.计时器例子
        // function tick() {
        //     const element = (
        //         <div>
        //             <h1>Hello, world!</h1>
        //             <h2>It is {new Date().toLocaleTimeString()}.</h2>
        //         </div>
        //     );
        //     ReactDOM.render(element, document.getElementById('root'));
        // }
        // setInterval(tick, 1000);




        //3.
    </script>
</body>
</html>